import { nextTick } from 'vue'
import './index.scss'
export const loading = {
  show() {
    const body: Element = document.body
    const div = document.createElement('div')
    div.className = 'block-loading'
    div.innerHTML = `
      <div class="block-loading-box">
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
        <div class="block-loading-item"></div>
      </div>
    `
    body.insertBefore(div, body.childNodes[0])
  },
  hide() {
    nextTick(() => {
      setTimeout(() => {
        const el = document.querySelector('.block-loading')
        el?.parentNode?.removeChild(el)
      }, 1500)
    })
  }
}
